Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Jelajahi CSS Container Queries, evolusi selanjutnya dalam desain responsif. Pelajari cara membuat komponen adaptif berdasarkan ukuran container, bukan hanya ukuran viewport.
Desain responsif telah menjadi landasan pengembangan web selama lebih dari satu dekade. Secara tradisional, kami mengandalkan media queries untuk menyesuaikan tata letak kami berdasarkan ukuran viewport. Namun, pendekatan ini terkadang terasa membatasi, terutama saat berurusan dengan desain berbasis komponen yang kompleks. Masuklah CSS Container Queries – fitur baru yang hebat yang memungkinkan komponen untuk beradaptasi berdasarkan ukuran elemen yang memuatnya, bukan hanya viewport.
Container queries adalah pengubah permainan karena mereka memungkinkan desain responsif berbasis elemen. Alih-alih bertanya "Berapa ukuran layarnya?", Anda dapat bertanya "Berapa banyak ruang yang tersedia untuk komponen ini?" Ini membuka dunia kemungkinan untuk menciptakan komponen yang benar-benar dapat digunakan kembali dan adaptif.
Pikirkan tentang komponen kartu yang mungkin muncul dalam berbagai konteks: bilah sisi yang sempit, bagian hero yang lebar, atau kisi multi-kolom. Dengan media queries, Anda perlu menulis aturan khusus untuk setiap skenario ini berdasarkan lebar viewport. Dengan container queries, kartu dapat menyesuaikan tata letak dan gayanya secara cerdas berdasarkan dimensi container induknya, terlepas dari ukuran layar secara keseluruhan.
Container queries menawarkan beberapa keuntungan utama dibandingkan media queries tradisional:
Mari selami aspek praktis penggunaan container queries. Langkah pertama adalah mendeklarasikan container. Anda dapat melakukan ini menggunakan properti container-type pada elemen induk:
Properti container-type menerima beberapa nilai:
size: Container queries akan merespons dimensi inline dan blok container.inline-size: Container queries hanya akan merespons dimensi inline (lebar dalam mode penulisan horizontal) container. Ini adalah opsi yang paling umum dan seringkali paling berguna.block-size: Container queries hanya akan merespons dimensi blok (tinggi dalam mode penulisan horizontal) container.normal: Elemen bukan container query. Ini adalah nilai default.style: Container queries akan merespons style queries dan container name queries (dibahas kemudian), memungkinkan Anda untuk query properti kustom yang diatur pada container.Berikut adalah contoh pendefinisian container yang merespons ukuran inline-nya:
.card-container {
container-type: inline-size;
}
Anda juga dapat menggunakan properti shorthand container untuk menentukan baik container-type maupun container-name (yang akan kita bahas nanti) dalam satu deklarasi:
.card-container {
container: card / inline-size;
}
Dalam kasus ini, 'card' adalah nama container.
Setelah Anda menentukan container, Anda dapat menggunakan aturan @container untuk menulis queries Anda. Sintaksnya mirip dengan media queries, tetapi alih-alih menargetkan dimensi viewport, Anda menargetkan dimensi container:
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Dalam contoh ini, kita menargetkan container "card" dan menerapkan gaya ke elemen .card, .card__image, dan .card__content ketika lebar container setidaknya 400px. Perhatikan `card` sebelum `(min-width: 400px)`. Ini sangat penting ketika Anda telah memberi nama container Anda menggunakan `container-name` atau properti shorthand `container`.
Jika Anda belum memberi nama container Anda, Anda dapat menghilangkan nama container:
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Anda dapat menggunakan rentang fitur media yang sama yang tersedia di media queries, seperti min-width, max-width, min-height, max-height, dan orientation.
Memberi nama container Anda dapat membantu, terutama saat berurusan dengan container bersarang atau tata letak yang kompleks. Anda dapat menetapkan nama ke container menggunakan properti container-name:
.card-container {
container-name: card;
container-type: inline-size;
}
Kemudian, dalam container queries Anda, Anda dapat menargetkan container berdasarkan namanya:
@container card (min-width: 400px) {
/* Styles for the 'card' container */
}
Container Style Queries memungkinkan Anda untuk bereaksi terhadap style container Anda daripada ukurannya. Ini sangat kuat ketika dikombinasikan dengan properti kustom. Pertama, Anda harus mendefinisikan container Anda dengan container-type: style:
.component-container {
container-type: style;
}
Kemudian Anda dapat menggunakan @container style(--theme: dark) untuk query nilai properti kustom --theme:
.component-container {
--theme: light;
}
@container style(--theme: dark) {
.component {
background-color: black;
color: white;
}
}
Ini memungkinkan komponen Anda untuk beradaptasi berdasarkan konfigurasi yang diatur melalui CSS daripada ukuran viewport. Ini membuka kemungkinan besar untuk pemberian tema dan gaya dinamis.
Mari kita lihat beberapa contoh konkret tentang bagaimana container queries dapat digunakan dalam skenario dunia nyata:
Bayangkan komponen kartu yang menampilkan informasi tentang produk. Dalam container yang sempit, kita mungkin ingin menumpuk gambar dan konten secara vertikal. Dalam container yang lebih lebar, kita dapat menampilkannya berdampingan.
HTML:
CSS:
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__content {
width: 100%;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
margin-bottom: 0;
}
.card__content {
width: 50%;
}
}
Dalam contoh ini, kartu awalnya akan menampilkan gambar dan konten yang ditumpuk secara vertikal. Ketika lebar container mencapai 400px, kartu akan beralih ke tata letak horizontal.
Pertimbangkan menu navigasi yang perlu beradaptasi berdasarkan ruang yang tersedia. Dalam container yang sempit (misalnya, bilah sisi seluler), kita mungkin ingin menampilkan item menu dalam daftar vertikal. Dalam container yang lebih lebar (misalnya, header desktop), kita dapat menampilkannya secara horizontal.
HTML:
CSS:
.nav-container {
container-type: inline-size;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav__item {
margin-bottom: 8px;
}
.nav__item a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav {
display: flex;
}
.nav__item {
margin-right: 16px;
margin-bottom: 0;
}
.nav__item a {
display: inline-block;
}
}
Dalam contoh ini, menu navigasi awalnya akan menampilkan item dalam daftar vertikal. Ketika lebar container mencapai 600px, menu akan beralih ke tata letak horizontal.
Bayangkan tata letak artikel yang perlu beradaptasi tergantung di mana ia ditempatkan. Jika di bagian pratinjau kecil, gambar harus berada di atas teks. Jika itu adalah artikel utama, gambar bisa berada di samping.
HTML
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
CSS
.article-container {
container-type: inline-size;
}
.article {
display: flex;
flex-direction: column;
}
.article-image {
width: 100%;
margin-bottom: 10px;
}
.article-content {
width: 100%;
}
@container (min-width: 768px) {
.article {
flex-direction: row;
}
.article-image {
width: 40%;
margin-right: 20px;
margin-bottom: 0;
}
.article-content {
width: 60%;
}
}
Dukungan browser untuk container queries sekarang sangat baik di seluruh browser modern, termasuk Chrome, Firefox, Safari, dan Edge. Penting untuk memeriksa Can I Use untuk informasi dukungan browser terbaru, karena fitur dan detail implementasi dapat berkembang.
Sementara container queries menawarkan alternatif yang kuat untuk media queries, penting untuk memahami pendekatan mana yang paling tepat.
Dalam banyak kasus, Anda kemungkinan akan menggunakan kombinasi media queries dan container queries. Gunakan media queries untuk menetapkan tata letak keseluruhan aplikasi Anda, dan kemudian gunakan container queries untuk menyempurnakan tampilan dan perilaku komponen individual dalam tata letak itu.
CSS Container Queries mewakili langkah maju yang signifikan dalam evolusi desain responsif. Dengan mengaktifkan responsivitas berbasis elemen, mereka memberdayakan pengembang untuk membuat komponen yang lebih fleksibel, dapat digunakan kembali, dan mudah dipelihara. Karena dukungan browser terus meningkat, container queries siap menjadi alat penting dalam gudang setiap pengembang web.
Saat menerapkan container queries untuk audiens global, pertimbangkan hal berikut:
inline-start dan inline-end alih-alih properti fisik seperti left dan right.em, rem) untuk memastikan bahwa teks Anda diskalakan dengan tepat.CSS Container Queries adalah alat yang ampuh untuk membangun aplikasi web yang benar-benar responsif dan adaptif. Dengan merangkul desain responsif berbasis elemen, Anda dapat membuat komponen yang secara mulus beradaptasi dengan konteks yang berbeda, menyederhanakan kode Anda, dan meningkatkan pengalaman pengguna secara keseluruhan. Karena dukungan browser terus berkembang, container queries siap menjadi bagian fundamental dari pengembangan web modern. Rangkullah teknologi ini, bereksperimen dengan kemampuannya, dan buka tingkat fleksibilitas baru dalam desain responsif Anda. Pendekatan ini memungkinkan penggunaan kembali komponen yang lebih baik, kemudahan pemeliharaan, dan proses desain yang lebih intuitif, menjadikannya aset yang tak ternilai bagi pengembang front-end di seluruh dunia. Transisi ke container queries mendorong pendekatan yang lebih berpusat pada komponen untuk desain, menghasilkan pengalaman web yang lebih kuat dan mudah beradaptasi untuk pengguna di seluruh dunia.